<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				overflow: hidden;
			}
			.ren{
				position: absolute;
				bottom: 0;
				width: 100px;
				height: 100px;
				background: pink;
			}
		</style>
	</head>
	<body>
		<div class="ren"></div>
		<div class="web"></div>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var ren = document.querySelector(".ren");
			let allArr=[]
			function createE(score){
				let that = this;
//				console.log(this.score)
				this.score = score;
				this.isCoflict = false;
				this.div = document.createElement("div");
				var ranL = Math.random()*375;
				$(this.div).css({
					width:"100px",
					height:"100px",
					background:"skyblue",
					position:"absolute",
					top:"-100px",
					left:ranL+"px"
				})
				$(this.div).animate({
					top:"1000px",
				},5000,"linear",function(){
					this.remove();
					let idx = allArr.indexOf(that);
					if(idx!=-1){
						allArr.splice(idx,1);
					}
				})
				$(".web").append($(this.div));
			}
			
			var t = setInterval(function(){
				var x = new createE(Math.floor(Math.random()*100));
				allArr.push(x);
			},1000)
			
			setInterval(function(){
				allArr.forEach(cur=>{
					let res = bump(ren,cur.div);
					if(res&&!cur.isCoflict){
						cur.isCoflict = true;
							console.log(cur.score);
					}
				})
			},30)
			//判断是否碰撞了。
			function bump(obj1, obj2) {
			//	console.log(obj2.offsetTop,obj2);
				var t1 = obj1.offsetTop + obj1.offsetHeight,
					l1 = obj1.offsetLeft + obj1.offsetWidth,
					r1 = obj1.offsetLeft,
					b1 = obj1.offsetTop;
					
				var t2 = obj2.offsetTop,
					l2 = obj2.offsetLeft,
					r2 = obj2.offsetLeft + obj2.offsetWidth,
					b2 = obj2.offsetTop + obj2.offsetHeight;
				if(t1 < t2 || l1 < l2 || r1 > r2 || b1 > b2) {
					//console.log("没有碰到！");
					return false;
				} else {
					//console.log("碰到了！");
					return true;
				}
			}
		</script>
	</body>
</html>
